<template>
  <el-row>
    <el-table
      ref="table"
      :data="data"
      :height="height"
      :highlight-current-row="true"
      :stripe="stripe"
      @filter-change="filterChange"
      @sort-change="sortChange"
      @current-change="currentChange"
      @selection-change="selectionChange"
      @row-click="rowClick"
      style="width: 100%"
      :show-summary="ifshowSum"
      border
      v-loading="loading"
      class="table-row"
    >
      <el-table-column v-if="tableOption.isMultiSelect" type="selection" width="55" align="center" />
      <el-table-column fixed="left" v-if="tableOption.showTag" align="center" width="45">
        <template slot-scope="scopeTag">
          <slot name="id" :scope="scopeTag"></slot>
        </template>
      </el-table-column>
      <template v-if="tableOption.NoInlineEdit">
        <template v-for="(column, key) in ifNoEditColumns">
          <el-table-column
            :label="column.name"
            :prop="column.value"
            :align="column.align"
            :key="key"
            :width="column.width || null"
          >
            <template slot-scope="scope">
              <template v-if="column.formatter" >
                <span v-html="column.formatter(scope.row, column)"></span>
              </template>
              <template v-else>
                <span>{{ scope.row[column.value] }}</span>
              </template>
            </template>
          </el-table-column>
        </template>
      </template>
      <template v-for="(column, index) in columns">
        <el-table-column
          :key="index + '1'"
          :column-key="column.value + '_' + index"
          :prop="column.value"
          :label="column.name"
          :min-width="column.minWidth || null"
          :width="column.width || null"
          :filters="column.filters"
          filter-placement="bottom"
          :formatter="column.formatter"
          :align="column.align"
        >
          <template slot-scope="scope">
            <!-- 若需要进行编辑的表格，传入数据增加 isEditing 字段，编辑按钮操作当前行的isEditing状态 -->
            <template v-if="scope.row.isEditing">
              <!-- columns中可以增加type字段，用于判断是输入框还是下拉框 -->
              <el-select v-if="column.isSelect" v-model="scope.row[column.value]" size="small" filterable @change="selectChange">
                <el-option v-for="item in column.selectData" :key="item.value" :label="item.value" :value="item.code"></el-option>
              </el-select>
              <el-date-picker v-else-if="column.isDate" v-model="scope.row[column.value]" size="small" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :clearable="false"></el-date-picker>
              <el-input v-else v-model="scope.row[column.value]" size="small"></el-input>
            </template>
            <template v-else-if="column.formatter">
              <span v-html="column.formatter(scope.row, column)"></span>
            </template>
            <template v-else-if="column.render">
              <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
            </template>
            <template v-else>
              <span>{{ scope.row[column.value] }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
      <!-- 表格尾部无法修改列 -->
      <template v-if="tableOption.NoInlineEditEnd">
        <template v-for="(column) in ifNoEditColumnsEnd">
          <el-table-column
            :label="column.name"
            :prop="column.value"
            :align="column.align"
            :key="column.name"
            :width="column.width || null"
          >
            <template slot-scope="scope">
              <template v-if="column.formatter" >
                <span v-html="column.formatter(scope.row, column)"></span>
              </template>
              <template v-else>
                <span>{{ scope.row[column.value] }}</span>
              </template>
            </template>
          </el-table-column>
        </template>
      </template>
      <el-table-column label="操作" fixed="right" v-if="tableOption.isShowOperate" :min-width="tableOption.operateWidth || null" align="center">
        <template slot-scope="scope">
          <slot :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        v-if="pageOption"
        @size-change="onSizeChange"
        @current-change="onPageChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size.sync="currentPageSize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-row>
</template>

<script>
export default {
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: Object,
      },
      render(h, ctx) {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
          column: ctx.props.column,
        }
        return ctx.props.render(h, params, ctx)
      }
    }
  },
  props: {
    tableOption: {
      type: Object,
      default() {
        return {
          isMultiSelect: false,
          isShowOperate: false,
          NoInlineEdit: false,
          NoInlineEditEnd: false,
          showTag: false
        }
      },
    },
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
    },
    total: {
      type: Number,
      default: 0
    },
    pageOption: {
      type: Object,
    },
    height: {
      type: Number,
    },
    stripe: {
      type: Boolean,
      default: false
    },
    ifshowSum: {
      type: Boolean,
      default: false
    },
    ifNoEditColumns: {
      type: Array
    },
    ifNoEditColumnsEnd: {
      type: Array
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentPage: 1,
      currentPageSize: 5,
      addIndex: 1,
      indexFormatter: (index) => {
        return (this.currentPage - 1) * this.currentPageSize + index + 1
      },
    }
  },
  watch: {
    pageOption: {
      deep: true,
      handler(val) {
        this.currentPage = val.pageNum
        this.currentPageSize = val.pageSize
      },
    },
  },
  created() {
    if (this.pageOption) {
      this.currentPage = this.pageOption.pageNum
      this.currentPageSize = this.pageOption.pageSize
    }
  },
  /**
   * 使用表格行内修改需要在表格数据初始化时遍历表格数据并添加isEditing属性为false
   * fetchData() {
      getList().then(response => {
        let list = response.data.items || []
        this.list = list.map(value => {
          return Object.assign({}, value, {isEditing: false})
        })
      })
    },
  */
  methods: {
    onSizeChange(val) {
      this.currentPageSize = val
      this.currentPage = 1
      this.$emit("change", {
        pageSize: this.currentPageSize,
        pageNum: this.currentPage,
      });
    },
    onPageChange(val) {
      this.currentPage = val
      this.$emit("change", {
        pageSize: this.currentPageSize,
        pageNum: this.currentPage,
      })
    },
    filterChange(val) {
      this.$emit("filterChange", val)
    },
    sortChange(val) {
      this.$emit("sortChange", val)
    },
    setFilters(val) {
      this.$refs.table.setFilter(val)
    },
    clearFilter() {
      this.$refs.table.clearFilter()
    },
    currentChange(row) {
      this.$emit("currentChange", row)
    },
    selectionChange(val) {
      this.$emit("selectionChange", val)
    },
    rowClick(row, column, event) {
      this.$emit("rowClick", row, column, event)
    },
    // 表格行内修改select选择事件
    selectChange(val) {
      this.$emit("selectChange", val)
    },
    // 表格合计功能
    getSummaries(params) {
      this.$emit("showSum", params)
    },
  }
}
</script>

<style lang="less">
  .page-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #ffffff;
    padding: 10px 0;
  }
  .date-picker {
    width: 100% !important;
  }
  .table-row {
    th {
      padding: 0 !important;
      height: 50px;
      line-height: 50px;
    }
  }
  .table-row {
    td {
      padding: 0 !important;
      height: 45px;
      line-height: 45px;
    }
  }
</style>
